<template>
  <div class="content">
    <div class="header">
      <div class="avatar">
        <van-image
            round
            :src="avatar"
            height="100" width="100"/>
      </div>
      <div class="info">
        <h1 id="nickname">{{ nick_name }}</h1>
      </div>
    </div>
    <van-cell-group>
      <van-cell @click="toFavorite" value="我喜欢的" is-link/>
      <van-cell @click="toFriends" value="我的朋友" is-link/>
      <van-cell @click="toHistory" value="历史歌单" is-link/>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: "Info",
  data() {
    return {
      nick_name: "",
      avatar: ""
    }
  },
  methods: {
    toFavorite() {
      MiniApp.navigateTo({url: "/favorite.html"})
    },
    toFriends() {
      MiniApp.navigateTo({url: "/friends.html"})
    },
    toHistory() {
      MiniApp.navigateTo({url: "/history.html"})
    }
  },
  mounted() {
    let that=this
    MiniApp.getStorage({
      key: "userInfo", success(res) {
        let data = res.data && JSON.parse(res.data)
        if (data) {
          that.nick_name = data.nickName
          that.avatar = data.avatarUrl
        }
      }
    })
  }
}
</script>

<style scoped>
.header {
  height: 8rem;
  vertical-align: center;
  display: flex;
  background: transparent;
  padding: 30px;
  margin-bottom: 50px;
}

.info {
  padding: 20px;
}

#nickname {
  margin-bottom: 30px;
  font-size: 50px;
}

</style>